<script setup lang="ts">
import * as echarts from "Echarts";
import { onMounted, ref } from "vue";
const charts = ref(null);
onMounted(() => {
    if (charts.value) {
        const myChart = echarts.init(charts.value);
        const option = {
            dataset: {
                source: [
                    ['score', '', 'product'],
                    [89.7, 20145, '定时更新'],
                    [89.3, 58212, '公网IP'],
                    [74.4, 41032, '对象存储'],
                    [68.1, 79146, '消息通知'],
                    [57.1, 78254, 'CDN加速'],
                    [50.1, 12755, 'ECS服务'],
                    [32.7, 20112, 'redis存储'],
                    [19.6, 91852, '云同步'],
                    [10.6, 101852, '数据库存储'],
                ]
            },
            grid: { containLabel: true },
            xAxis: { name: '' },
            yAxis: { type: 'category' },
            visualMap: {
                orient: 'horizontal',
                left: 'center',
                min: 10,
                max: 100,
                text: ['即将到期', '未到期'],
                // Map the score column to color
                dimension: 0,
                inRange: {
                    color: ['#FD665F', '#FFCE34', '#65B581']
                }
            },
            series: [
                {
                    type: 'bar',
                    encode: {
                        // Map the "amount" column to X axis.
                        x: 'amount',
                        // Map the "product" column to Y axis
                        y: 'product'
                    }
                }
            ]
        };
        myChart.setOption(option);
    }
});
</script>

<template>
    <div class="charts" ref="charts" style="width: 600px; height: 400px"></div>
</template>

<style lang="scss" scoped></style>
